<template>
    <div class="box">
        <div class="box-header"><span class="title">风险减轻建议</span></div>
        <div class="box-body scroll">
            <ul class="advise-list">
                <li class="item" v-if="hasAdvise.time">
                    <div class="item-header">
                        <div class="shielder"></div>
                    </div>
                    <div class="item-body">
                        <div class="title">解决流程堵塞</div>
                        <p>该事项目前停留在 {{pauseNodeName}} 环节已停留{{pauseDuring}}天，请督促{{dealerGroup}}{{dealerName}}尽快处理</p>
                    </div>
                </li>
                <li class="item" v-if="hasAdvise.completion">
                    <div class="item-header">
                        <div class="shielder"></div>
                    </div>
                    <div class="item-body">
                        <div class="title">补全业务数据</div>
                        <p>该事项目前存在数据完整度不足100%的情况，为确保业务数据质量，支撑数据分析，请根据实际业务需求，考虑让负责人{{chargerGroup}}的{{chargerName}}联系系统建设单位补充下列字段信息：
                            <ul class="legacy-list">
                                <li v-for="(item,index) in blankList">{{item}}</li>
                            </ul>
                        </p>
                    </div>
                </li>
            </ul>
            <x-loading v-if="showLoading"></x-loading>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import Loading from '@/components/Loading'
import bus from '@/utils/bus'

    export default {
        name: '',
        data() {
            return {
                showLoading:false,
                hasAdvise:{
                    time:false,
                    completion:false
                },
                pauseNodeName:null,
                pauseDuring:0,
                dealerGroup:null,
                dealerName:null,
                chargerName:null,
                chargerGroup:null,
                blankList:[]
            }
        },
        components:{
            'x-loading':Loading
        },
        created() {
            bus.$on('render-flow-analyze',msg=>{
                this.renderView(msg.id)
            })
        },
        methods: {
            renderView(id){
                this.showLoading = true
                let params = {
                    code:id
                }
                axios.get(this.URLHEAD_TA + 'GetAllProjectRiskSuggestionById',{params:params}).then(res=>{
                    let json = res.data
                    let node = json.Data[0]
                    if(node){
                        if(node.time.pauseNodeName === '已完结'){
                            this.hasAdvise.time = false
                        }else{
                            this.hasAdvise.time = node.time.hasAdvise
                        }
                        
                        this.hasAdvise.completion = node.completion.hasAdvise
                        this.pauseNodeName = node.time.pauseNodeName
                        this.pauseDuring = node.time.pauseDuring
                        this.dealerGroup = node.time.pauseNodeDealerGroup
                        this.dealerName = node.time.pauseNodeDealer
                        this.chargerName = node.completion.chargerName
                        this.chargerGroup = node.completion.chargerGroup
                        this.blankList = this._.filter(node.completion.Unblanked)

                        this.showLoading = false
                    }
                })
            }
        },
    }
</script>

<style scoped>
.box-body{
    height:487px;
}
    .shielder{
        background: url(../../assets/images/dunpai.png) center center no-repeat;
        width:39px;
        height: 45px;
    }
    ul.advise-list {
    padding: 12px;
}

ul.advise-list .item {
    display: flex;
}

ul.advise-list .item-header {
    padding: 15px 15px 15px 0;
}

ul.advise-list .title {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 15px 0 18px 0;
}

.advise-list p {
    font-size: 14px;
    color: #fff;
    line-height: 2em;
}

ul.legacy-list li {
    list-style: circle;
}

ul.legacy-list {
    padding-left: 18px;
    padding-top: 10px;
}
</style>